---
title: Animated Grid Pattern
date: 2024-02-07
description: A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
author: dillionverma
published: false
video: https://cdn.magicui.design/grid-pattern.mp4
---

<ComponentPreview name="animated-grid-pattern-demo" />

<Steps>

<Step>

## Installation

Copy and paste the following code into your project.

```typescript
// lib/utils.ts
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

```text
components/magicui/animated-grid-pattern.tsx
```

<ComponentSource name="animated-grid-pattern" />

</Step>

</Steps>

## Props

### GridPattern

| Prop            | Type   | Description                                   | Default |
| --------------- | ------ | --------------------------------------------- | ------- |
| className       | string | Additional classes to be added to the pattern | -       |
| width           | number | Width of the pattern                          | 40      |
| height          | number | Height of the pattern                         | 40      |
| x               | number | X offset of the pattern                       | -1      |
| y               | number | Y offset of the pattern                       | -1      |
| strokeDasharray | number | Stroke dash array of the pattern              | 0       |
| numSquares      | number | Number of squares in the pattern              | 200     |
| maxOpacity      | number | Maximum opacity of the pattern                | 0.5     |
| duration        | number | Duration of the animation                     | 1       |
| repeatDelay     | number | Repeat delay of the animation                 | 0.5     |
